<template>
  <div>
    <header>
      <template v-if="type == 0">
        用户名：
        <el-input
          size="small"
          v-model="username"
          @keyup.enter="getRecord"
        ></el-input>
      </template>
      <template v-else>
        用户ID：
        <el-input
          size="small"
          v-model="fuid"
          @keyup.enter="getRecord"
        ></el-input>
      </template>
      <el-button type="primary" @click="getRecord">搜索</el-button>
    </header>
    <section class="user-list">
      <el-table
        :data="userList"
        border
        fit
        style="width:100%"
        >
        <el-table-column prop="fuid" label="用户id"/>
        <template v-if="type == 0">
          <el-table-column prop="cU_ser" label="用户名字"/>
          <el-table-column prop="fTze" label="投资额"/>
          <el-table-column prop="tDate" label="投资时间"/>
        </template>
        <template v-if="type == 1">
          <el-table-column prop="fbid" label="标ID"/>
          <el-table-column prop="ftzid" label="投资记录ID"/>
          <el-table-column prop="ftze" label="该笔投资额"/>
          <el-table-column prop="fTctze" label="算提成的投资额"/>
          <el-table-column prop="tDate" label="日期"/>
        </template>
        <template v-if="type == 2">
          <el-table-column prop="fhkje" label="回款金额"/>
          <el-table-column prop="ftze" label="续投金额"/>
          <el-table-column prop="xchksj" label="下一笔回款日期"/>
          <el-table-column prop="xchkje" label="下一笔回款金额"/>
        </template>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <router-link :to="`/vip-manage/detail/${scope.row.fuid}/jbxx`">查看</router-link>
          </template>
        </el-table-column>
      </el-table>
    </section>
    <section class="pagination" v-if="total>0">
      <div class="total-invest" v-if="type==0">
        今日投资金额：{{totalInvest.sumQ}}
        今日平均投资额：{{totalInvest.pjsumQ}}
      </div>
      <el-pagination
        layout="prev, pager, next"
        :total="total"
        :current-page.sync="page"
        @current-change = 'getRecord'
      >
      </el-pagination>
    </section>
  </div>
</template>
<script>
  export default {
    // beforeMount() {
    //   this.$emit('onCustomStyle', {
    //     border: 'none',
    //     overflowY: 'auto',
    //     background: '#f5f8fb'
    //   })
    // },
    data() {
      return {
        username: '',
        fuid: '',
        userList: [],
        total: 0,
        page: 1,
        apiArr: ['loadCgList','cgTzmx','loadXtList'],
        type: this.$route.params.type,
        totalInvest: {}
      }
    },
    activated(){
      this.customStyle()
    },
    mounted() {
      this.getRecord();
      this.customStyle()
    },
    methods: {
      customStyle(){
        this.$emit('onCustomStyle',{
          border: 'none',
          overflowY: 'auto',
          background: '#f5f8fb'
        })
      },
      async getRecord() {
        let {data} = await this.$get(
          this,{
            api: '/data/'+this.apiArr[this.type]+'.do',
            data: {
              kfid: this.$route.params.kfid,
              pageSize: 10,
              page: this.page,
              username: this.username,
              fuid: this.fuid,
              dt1: this.$route.params.dt
            }
          }
        );
        if (data.state == 0) {
          this.userList = data.content.data;
          this.total = data.content.num;
          this.totalInvest = {
            sumQ: data.content.sumQ,
            pjsumQ: data.content.pjsumQ
          }
        }
      }
    }
  }
</script>
<style>
  .el-input{
    width: 180px;
  }
  .user-list{
    margin: 24px 0;
  }
  .pagination{
    text-align: center;
  }
  .total-invest {
    color: #f00;
    text-align: left;
  }
</style>
